require(['./config'], () => {
    require(['url', 'template', 'header','bootstrap','fly', 'jquery',  'footer'], (url, template,header) => {
        // console.log($)
        class Detal {
            constructor() {
                this.getDate().then(() => {
                    this.render()
                    this.show() //弹框分享到效果
                    this.Zoom() //放大镜效果
                    this.shop() //购物车效果
                    this.Tab() //切换图片效果
                })

            }
            getDate() {
                // console.log(222)
                // 从地址栏拿到id
                const id = window.location.search.slice(1).split('&').reduce((obj, item) => {
                    var arr = item.split('=')
                    obj[arr[0]] = arr[1]
                    return obj
                }, {}).id
                this.id = Number(id)
                // console.log(this.id)
                return new Promise(resolve => {
                    $.get(`${url.rap2}/api/shop/detail`, { id: this.id }, resp => {
                        // console.log(resp)
                        if (resp.code === 200) {
                            // const {detal} = resp.body
                            // console.log(body)
                            // 结构数据，detal里面没有id,将来切换真实接口就不加id
                            this.detal = { ...resp.body, id: this.id }
                            resolve()
                        }
                    })
                })
            }
            render() {
                // 渲染页面
                const html = template('catedetal', {
                    ...this.detal
                })
                $('#maindetal').html(html)
                header.sumshop()
            }
            show() {
                // bootstrap 分享到的 弹框效果
                $('#btnshow').popover()
            }
            Zoom() {
                // 鼠标移入移除出box，实现span boximg显示隐藏
                $('#box').hover(function () {
                    $('#box span').show()
                    $('#bigbox').show()
                }, function () {
                    $('#box span').hide()
                    $('#bigbox').hide()
                })
                // 移动span mousemove事件控制右边图片位置
                $('#box').on('mousemove', function (e) {
                    // 计算span坐标
                    var left = e.pageX - $('#box').offset().left - $('#box span').outerWidth() / 2
                    var top = e.pageY - $('#box').offset().top - $('#box span').outerHeight() / 2
                    var maxleft = $('#box').innerWidth() - $('#box span').outerWidth()
                    var maxtop = $('#box').innerHeight() - $('#box span').outerHeight()
                    // console.log(left,top)
                    if (left < 0) left = 0
                    if (top < 0) top = 0
                    if (left > maxleft) left = maxleft
                    if (top > maxtop) top = maxtop
                    $('#box span').css({ left, top })
                    $('#bigimg').css({
                        left: -2 * left,
                        top: -2 * top
                    })

                })
            }
            shop() {
                // + - 控制数量
                $('#add').on('click',function(){
                var num = $('#p').html()
                    num++
                    $('#p').html(num)
                })
                $('#minus').on('click',function(){
                    var num = $('#p').html()
                    num--
                    if(num<0){
                        num = 0
                        this.disabled = true
                    } 
                    $('#p').html(num)
                })
                // 使用localstorage 存取商品
                $('#addshop').on('click', (e) => {
                    this.addPlug(e) //添加购物车
                    let card = localStorage.getItem('card')
                    if (card) {
                        card = JSON.parse(card)
                        // console.log(card)
                        let isExist = card.some(shop => {
                            return shop.id === this.detal.id
                        })
                        if (isExist) {
                            card = card.map(shop => {
                                if (shop.id === this.detal.id) {
                                    // console.log( $('#p').html())
                                    shop.count+=parseInt( $('#p').html())
                                    // console.log(shop.count)
                                }
                                return shop
                            })

                        } else {
                            card.push({ ...this.detal, count: 1,checked:true })
                        }
                        localStorage.setItem('card', JSON.stringify(card))
                    } else {
                        const arr = [{ ...this.detal, "count": 1 }]
                        localStorage.setItem('card', JSON.stringify(arr))
                    }
                    // console.log(card)
                })
            }
            Tab(){
                // 选项卡效果
                $('#left-list').on('click','img',function(){
                    var osrc=$(this).attr("src")
                    // const src = $(this).index()
                    // console.log($(this).index())
                    $('#left-list').find('img').attr('class','')
                    $(this).attr('class','ac')
                    // console.log(osrc)
                    $('#helloimg').attr('src',osrc)
                    $('#bigimg').attr('src',osrc)
                    
                })
            }
            addPlug(e){
                // 加入购物车是的抛物线
                $(`<div class="div"></div> style = "background:red;color:red;"`).fly({
                    // 开始位置
                    start:{
                        left:e.clientX,
                        top:e.clientY
                    },
                    // 结束位置
                    end:{
                        left:$('#shopbox').offset().left - $(window).scrollLeft(),
                        top:$('#shopbox').offset().top - $(window).scrollTop()
                    },
                    speed: 1.1,  //运动速度
                    vartex_Rop:100,  //运动轨迹最高点
                    onEnd: function(){
                        this.destroy()
                        // console.log(444)
                        // 调用header里面计算数量的方法
                        header.sumshop()
                    }
                })
            }

        }
        new Detal()
    })
})